<template>
  <div style="height:100vh">
    <iframe
      id="getAddress"
      class="map-item"
      src="https://m.amap.com/picker/?key=71900d4cf5d5bc3893d218778e050116"

      style="width:100%; height:100%;position: absolute;z-index:22222;font-size:14px"
      @load="loadiframe"
    />
    <!-- <iframe
      id="mapPage"
      width="100%"
      height="100%"
      frameborder="0"
    src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&policy=1&key=STLBZ-YCKCG-AGGQK-IV3HY-6CKP2-LGBPM&referer=myapp"/>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // loc: {},
      locationData: {},
      city: ''
    }
  },
  mounted() {
    // window.addEventListener('message', event => {
    //   var loc = event.data
    //   console.log(loc, '6666')
    //   this.loc = loc
    //   this.$emit('getmapdata', this.loc)
    //   this.$emit('changeshow', false)
    // })
    this.showCityInfo()
  },
  created() {},
  methods: {
    loadiframe() {
      let iframe = document.getElementById('getAddress').contentWindow
      iframe.postMessage('hello', 'https://m.amap.com/picker/')
      // var citysearch = new AMap.CitySearch()
      // console.log(citysearch, '----')

      window.addEventListener(
        'message',
        function(e) {
          if (e.data.command != 'COMMAND_GET_TITLE') {
            //业务代码
            console.log(e.data.command, '686')

            let locationData = e.data
            this.locationData = locationData
            this.showCityInfo()
            this.$emit('getmapdata', this.locationData, this.city)
            this.$emit('changeshow', false)
            // this.$emit('getcity', this.city)
            console.log(e, '7777')
          }
        }.bind(this),
        false
      )

      // let d = document.getElementById('getAddress')
      // console.log(d, '5')
    },
    showCityInfo() {
      //加载城市查询插件
      AMap.service(['AMap.CitySearch'], () => {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch()
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity((status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
              let cityinfo = result.city
              // var citybounds = result.bounds
              // city = cityinfo
              console.log(cityinfo, '0000')
              this.city = cityinfo

              //   toast("您当前所在城市：" + cityinfo + ",code:"+ cityinfo.replace("市",""));
            }
          } else {
            //toast("您当前所在城市：" + result.info + "");
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.map-item {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: #fff;
  z-index: 222;
  font-size: 14px;
}
</style>
